<template>
	<view class="wrapForm">
		<view class="bgLine flex jst-between pL25 pR25">
			<block v-if="!isSm">
				<view class="w60">
					<view class="font26 bold"></view>
					<view class="font14 u-9 mT5">
						报名后会有平台人员联系您
					</view>
				</view>
				<image class="rzImg" :src="resources.ygRzImg" mode=""></image>
			</block>
		</view>
		<view class="wrapFormBody pL15 pR15 pT15 rzBox">
			<view class="font18">用工信息</view>
			<u-form :label-width="200" :label-style="{'font-size':'30rpx'}" class="xf-wrap-form" ref="dataForm"
				:rules="rules" :model="formData" :error-type="['message']">

				<u-form-item label="联系人" :required="true" :label-position="'top'" prop="contactPerson">
					<view class="w100 flex alg-center jst-between">
						<view class="w70"><u-input :disabled="isSm" class="t-right" placeholder="请输入联系人"
								v-model="formData.contactPerson" /></view>
						
					</view>
				</u-form-item>
				<u-form-item label="联系方式" :required="true" :label-position="'top'" prop="contactInformation">
					<view class="w100 flex alg-center jst-between">
						<view class="w70"><u-input class="t-right" placeholder="请输入联系方式"
								v-model="formData.contactInformation" />
						</view>
						
					</view>
				</u-form-item>
				<u-form-item label="用工需求" :required="true" :label-position="'top'" prop="employmentDemand">
					<view class="w100 flex alg-center jst-between">
						<u-input type="text" class="t-right" placeholder="例如:招募电工3人日结工作,薪资100元/天"
								v-model="formData.employmentDemand" />
						
					</view>
				</u-form-item>
				<view class="font18 mT10">补充信息</view>
				<u-form-item label="工作地址" :label-position="'top'" prop="workingAddress">
					<view class="w100 flex alg-center jst-between">
						<u-input class="t-right" placeholder="请输入工作地址"
								v-model="formData.workingAddress" />
						
					</view>
				</u-form-item>
				<u-form-item label="技能需求"  :label-position="'top'" prop="skillDemand">
					<view class="w100 flex alg-center jst-between">
						<u-input class="t-right" placeholder="例如:需要电焊证书,电工证书等"
								v-model="formData.skillDemand" />
					
					</view>
				</u-form-item>
			</u-form>
		</view>
		<view class="flex jst-center bottomW">
			<view class="pointer rightNowPay u-f font15 t-center" @click="saveMyInfo">
				确定
			</view>
		</view>
		<xfTipModal ref="tipModal"></xfTipModal>
	</view>
</template>

<script>
	import {
		needJobForm,
		getUserInfo
	} from "@/api/userInterface/user.js"
	export default {
		data() {
			return {
				isSm: false,
				formData: {
					contactPerson: '',
					contactInformation: '',
					employmentDemand: '',
					workingAddress: '',
					skillDemand: ''
				},
				userInfo: '',
				rules: {
					contactPerson: [{
						required: true,
						message: '请输入联系人',
						trigger: ['change', 'blur']
					}],
					contactInformation: [{
						required: true,
						message: '请输入联系方式',
						trigger: ['change', 'blur']
					}, {
						rule: /^1[3456789]\d{9}$/,
						msg: '请正确输入您的手机号',
						trigger: ['change', 'blur']
					}],
					employmentDemand: [{
						required: true,
						message: '请输入用工需求',
						trigger: ['change', 'blur']
					}]
					
					

				}
			}
		},
		onReady() {
			this.$refs.dataForm.setRules(this.rules);
		},
		onShow() {
			this.getUserInfoOpt()
		},
		methods: {
			getUserInfoOpt() {
				getUserInfo().then(res => {
					this.formData.contactPerson = res.result.nickname;
					this.formData.contactInformation = res.result.phone;
				})
			},
			
			saveMyInfo() {
				let that = this;
				this.$refs.dataForm.validate(valid => {
					if (valid) {
						this.$refs.tipModal.open({
							content: "您确定提交该用工需求吗？",
							btnText: "提交",
							showCancel: true,
							success:function(){
								needJobForm(that.formData).then(res => {
									
									if(res.success==true){
										uni.showToast({
											title:"提交成功!",
											duration:2000,
											icon:'none'
										})
										setTimeout(()=>{
											uni.switchTab({
												url:"/pages/userPage/home/index"
											})
										},2000)
									}
								})
							}
							
						})

					} else {
						console.log('验证失败');
					}
				})
			}
		}
	}
</script>
<style lang="scss">
	page {

		min-height: 100%;
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
	.wrapForm {
		.rzCardBox {

			height: 128rpx;
			background: #F8F8F8;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			margin-top: 60rpx;

			&:last-child {
				margin-top: 30rpx;
			}

			.imgRzCard {
				width: 40rpx;
				height: 32rpx;
			}
		}

		min-height: 100%;
		padding-bottom: 100rpx;

		.wrapFormBody {
			margin-top: -120rpx;
			border-radius: 40rpx 40rpx 0 0;
			background: #fff;
			position: relative;
			z-index: 10;
		}

		.uni-forms-item {
			align-items: center !important;
		}

		.uni-input-placeholder {
			// text-align: right !important;
			color: #BDBDBD !important;
		}

		padding-bottom: 180rpx;
	}

	.bgLine {
		background-color: #E1EEFF;
		width: 100%;
		// height: 60rpx;
		padding: 30rpx 40rpx;

		.rzImg {
			width: 168rpx;
			height: 192rpx;
		}
	}

	.rightNowPay {
		width: 670rpx;
		height: 100rpx;
		line-height: 100rpx;
		background: #3291F8;
		border-radius: 30rpx;

	}
</style>